<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<view class="flex-col" style="background-color: #fff;position: fixed;top: 0;width: 100%;z-index: 99;">
				<view class="search">
					<u-search placeholder="请输入物流单号" v-model="data.keyword" @search="toSearch" actionStyle="color: #54bc6e;" @custom="toSearch"></u-search>
				</view>
				<view class="flex-row items-center justify-around relative section_5">
					<view class="flex-col justify-center relative items-center" style="height: 80rpx;"
						@click="toType(index)" v-for="(item,index) in data.topList" :key="index">
						<text :class="data.topIndex==index?'font_3':'font_5'">{{item}}</text>
						<view class="section_6 pos_4" v-if="data.topIndex==index"></view>
					</view>
				</view>
			</view>
			<view class="flex-col list space-y-20">
				<view class="flex-col list-item space-y-42" v-for="(item, index) in data.list" :key="index" @click.stop="toDetail(item.order_id)">
					<view class="flex-col space-y-39">
						<view class="flex-row justify-between items-center">
							<text class="font_3">订单号：{{item.order_sn}}</text>
							<text class="font_4">{{item.status_name}}</text>
						</view>
						<view class="flex-row justify-between" v-for="(item1,index1) in item.goods_list" :key="index1">
							<view class="flex-row items-center space-x-18">
								<image class="image_7" :src="item1.cover_path" />
								<view class="flex-col items-start space-y-67">
									<text class="font_6 text_6">{{item1.service_name}}</text>
									<view class="group_3">
										<text class="font_9">￥</text>
										<text class="font_7">{{item1.price}}</text>
									</view>
								</view>
							</view>
							<text class="self-start font_8 text_7">数量：×{{item1.quantity}}</text>
						</view>
					</view>
					<view class="flex-col space-y-36">
						<view class="flex-row items-center">
							<view class="relative">
								<image class="image_8" :src="item.avatar" />
								<image src="/static/vip.png" class="pos1" v-if="item.is_v>0" mode=""></image>
							</view>
							<text class="font_6 text_8">{{item.nickname}}</text>
							<text class="font_10 text_9" @click.stop="toPhone(item)">联系Ta</text>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="group_4">
								<text class="font_11 text_11">合计:</text>
								<text class="font_2 text_10">￥{{item.pay_amounts}}</text>
							</view>
							<view class="flex-col justify-start items-center button" v-if="item.status==2" @click.stop="toReceipt(item,index)">
								<text class="font_12">确认接单</text>
							</view>
							<view class="flex-col justify-start items-center button" v-if="item.status==3" @click.stop="data.useIndex=index,data.show=true">
								<text class="font_12">核销</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-popup :show="data.show" :round="10" :closeable="true" mode="center" @close="data.show=false">
		<view class=""  style="padding:40rpx;pa">
			<div class="title" style="height: auto;margin-top: 0;margin-bottom: 40rpx;">请输入核销码</div>
			<view class="popupInput">
				<input type="text" placeholder="请输入" v-model="data.use_sn">
			</view>
			<view class=" flex-row justify-around items-center">
				<view class="btnLeft flex-row justify-center items-center" @click="data.show=false">取消</view>
				<view class="btnLeft btnBg flex-row justify-center items-center" @click="getUse">确定</view>
			</view>
		</view>
	</u-popup>
	<u-popup :show="data.show1" :round="10" :closeable="true" mode="center" @close="data.show1=false">
		<view class=""  style="padding:40rpx;pa">
			<div class="title" style="height: auto;margin-top: 0;margin-bottom: 40rpx;">请输入核销码</div>
			<view class="flex-row justify-between">
				<view class="flex-row items-center space-x-18">
					<image class="image_7" :src="data.usePage.cover_path" />
					<view class="flex-col items-start space-y-67" style="width: 83%;">
						<text class="font_6 text_6">{{data.usePage.service_name}}</text>
						<view class="flex-row items-center justify-between" style="width: 100%;">
							<view class="group_3">
								<text class="font_9">￥</text>
								<text class="font_7">{{data.usePage.price}}</text>
							</view>
							<text class="self-start font_8">数量：×{{data.usePage.quantity}}</text>
						</view>
						
					</view>
				</view>
			</view>
			<view class="flex-row justify-between items-center font11" style="margin-top: 40rpx;">
				<text>订单号</text>
				<text>{{data.usePage.order_sn}}</text>
			</view>
			<view class="flex-row justify-between items-center font11">
				<text>下单时间</text>
				<text>{{data.usePage.create_time}}</text>
			</view>
			<view class="flex-row justify-between items-center font11">
				<text>支付方式</text>
				<text>{{data.usePage.payment_name}}</text>
			</view>
			<view class="flex-row justify-between items-center font11" style="margin-bottom: 40rpx;">
				<text>手机号</text>
				<text>{{data.usePage.mobile}}</text>
			</view>
			<view class=" flex-row justify-around items-center">
				<view class="btnLeft btnBg flex-row justify-center items-center" style="width: 490rpx;" @click="getUse1">确定</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	import amapFile from '../../utils/amap-uni.130.js'
	const myAmapFun = new amapFile.AMapWX({
		// key: '3a26f7397fc12384590ae0a8ab25443b',
		key: '58961ba8cdec813ca3f723c95079f9d2'
	});
	const {
		proxy
	} = getCurrentInstance()
	onMounted(() => {
		console.log("onMounted");
	})
	onLoad(() => {
		// indexList.value.load_time = new Date().getFullYear()
		getDate()
		console.log("onload");
	})
	onReachBottom(() => {
		console.log("上拉");
		p.value++
		getDate()
	})
	onShow(() => {
		// uni.hideTabBar()
	})
	let globalData = ref(uni.getStorageSync('globalData') || '')

	let p = ref(1)
	let data = ref({
		list:[],
		keyword: '',
		whyList: ['123', '23', '12345'],
		cause: 0,
		topList: ['全部', '待接单', '待使用', '已完成', '已关闭'],
		topIndex: 0,
		cauId: '',
		selectIndex: 0,
		selectList: [],
		show: false,
		show1: false,
		useIndex:-1,
		use_sn:'',
		usePage:{}
	})
	const getDate = () => {
		let status
		if(data.value.topIndex!=0&&data.value.topIndex!=4){
			status=data.value.topIndex+1
		}else if(data.value.topIndex==4){
			status=11
		}else{
			status=data.value.topIndex
		}
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.orderList, {
			shop_id:uni.getStorageSync('shop_id')||'',
			status: status,
			p: p.value,
		}).then(res => {
			if (res.flag == "success") {
				data.value.list = [...data.value.list , ...res.data.list]
			} else {
				uni.showToast({
					title: res.message,
					icon: "none"
				})
			}
		})
	}
	const getUse =()=>{
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.usePage, {
			use_sn: data.value.use_sn,
			shop_id: uni.getStorageSync('shop_id') || '',
		}).then(res => {
			console.log(res)
			data.value.show=false
			if(res.flag=="success"){
				// data.value.show=false
				data.value.usePage=res.data
				data.value.show1=true
			}else{
				uni.showToast({
					title:res.message,
					icon:'none'
				})
			}
		})
	}
	const getUse1 =()=>{
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.doUse, {
			use_sn: data.value.use_sn,
			shop_id: uni.getStorageSync('shop_id') || '',
		}).then(async res => {
			console.log(res)
			data.value.show1=false
			let timer = setTimeout(()=>{
				uni.showToast({
					title:res.message,
					icon:'none'
				})
				clearTimeout(timer)
			},500)
			if(res.flag == 'success'){
				data.use_sn = ''
				p.value = 1
				getDate()
			}
		})
	}
	
	const toReceipt = (v,index) => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.receipt, {
			order_id: v.order_id,
			shop_id: uni.getStorageSync('shop_id') || '',
		}).then(res => {
			console.log(res)
			uni.showToast({
				title:res.message,
				icon:'none'
			})
			if(res.flag=="success"){
				setTimeout(()=>{
					getDetail(index)
				},1000)
			}
		})
	}
	const toUse = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.doUse, {
			use_sn: data.value.use_sn,
			shop_id: uni.getStorageSync('shop_id') || '',
		}).then(res => {
			console.log(res)
			uni.showToast({
				title:res.message,
				icon:'none'
			})
			if(res.flag=="success"){
				data.value.show=false
			}
		})
	}
	const getDetail = (index) => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.orderDetail, {
			order_id: data.value.list[index].order_id,
			shop_id: uni.getStorageSync('shop_id') || '',
		}).then(res => {
			console.log(res)
			if (data.value.topIndex == 0) {
				data.value.list[index] = res.data
			} else {
				data.value.list.splice(index, 1)
			}
		})
	}
	const toType = (num) => {
		data.value.topIndex = num
		data.value.list.length = 0
		p.value = 1
		getDate()
	
	}
	const toPhone=(v)=>{
		uni.makePhoneCall({
			phoneNumber:v.member_account
		})
	}
	const toSearch = () => {
		proxy.$req.requestPOST('https://client-huowu.shengxuankj.com/api/index/getInfo', {
			order_sn: data.value.keyword
		}).then(res => {
			data.value.info = res.data
		})
	}

	const toLocate = () => {
		uni.navigateTo({
			url: '/pages/locate/locate'
		})
	}
	const toDetail = (order_id) => {
		uni.navigateTo({
			url: '/pages/orderDetail/orderDetail?order_id=' + order_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		// background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding-bottom: 44rpx;
			overflow-y: auto;

			
			.search {
				margin: 20rpx auto;
				width: 95%;
			}

			.section_5 {
				padding: 0rpx 18rpx;
				width: 100%;
				background-color: #ffffff;
				.section_6 {
					background-color: #54bc6e;
					border-radius: 4rpx;
					width: 30rpx;
					height: 8rpx;
				}
				
				.pos_4 {
					position: absolute;
					bottom: 0;
				}
				.font_5 {
					font-size: 28rpx;
					font-family: PingFangHeiTC;
					line-height: 28rpx;
					color: #999999;
				}
			}

			.font_3 {
				font-size: 30rpx;
				font-family: PingFangSC;
				line-height: 29rpx;
				color: #333333;
			}

			.list {
				margin-top: 20rpx;
				padding: 0 30rpx;
				padding-top: 200rpx;

				.list-item {
					padding: 36rpx 28rpx 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.space-y-39 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 39rpx;
						}

						
					}

					.space-y-36 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 36rpx;
						}

						.image_8 {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
						.pos1{
							width: 24rpx;
							height: 24rpx;
							position: absolute;
							bottom: 10rpx;
							right: 0;
							z-index: 9;
						}

						.text_8 {
							margin-left: 21rpx;
						}

						.font_10 {
							font-size: 28rpx;
							font-family: PingFangHeiTC;
							line-height: 27rpx;
							color: #54bc6e;
						}

						.text_9 {
							margin-left: 14rpx;
						}

						.group_4 {
							line-height: 28rpx;
							height: 31rpx;

						

							.text_11 {
								font-size: 29rpx;
							}

							.font_2 {
								font-size: 37rpx;
								font-family: PingFangSC;
								line-height: 27rpx;
								color: #ff3333;
							}

							.text_10 {
								line-height: 28rpx;
							}
						}

						.button {
							padding: 18rpx 0;
							background-color: #54bc6e;
							background-image: linear-gradient(0deg, #00a796 0%, #54bc6e 100%);
							border-radius: 16rpx;
							width: 160rpx;
							height: 62rpx;

							.font_12 {
								font-size: 26rpx;
								font-family: PingFangSC;
								line-height: 25rpx;
								color: #ffffff;
							}
						}
					}

					.font_6 {
						font-size: 32rpx;
						font-family: PingFangSC;
						line-height: 31rpx;
						color: #333333;
					}
				}

				.space-y-42 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 42rpx;
					}
				}
			}

			.space-y-20 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}
			}

			.font_4 {
				font-size: 26rpx;
				font-family: PingFangHeiTC;
				line-height: 25rpx;
				color: #54bc6e;
			}
		}

		.tab-bar {
			background-color: #ffffff;
			border-top: solid 2rpx #f6f6f6;

			.section_7 {
				flex: 1 1 375rpx;
				padding: 8rpx 0 12rpx;
				background-color: #ffffff;
				height: 100rpx;

				.image_9 {
					width: 54rpx;
					height: 54rpx;
				}

				.font_13 {
					font-size: 24rpx;
					font-family: PingFangHeiTC;
					line-height: 23rpx;
				}

				.text_16 {
					color: #54bc6e;
				}

				.text_17 {
					color: #4ec200;
				}
			}

			.space-y-4 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 4rpx;
				}
			}
		}
	}
	.font_11 {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 27rpx;
		color: #666666;
	}
	.font11 {
		font-size: 30rpx;
		font-family: PingFangSC;
		line-height: 30rpx;
		color: #333;
		margin: 22rpx 0;
	}
	.space-x-18 {
	
		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-left: 18rpx;
		}
	
		.image_7 {
			border-radius: 20rpx;
			width: 160rpx;
			height: 160rpx;
		}
	
		.space-y-67 {
	
			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 67rpx;
			}
	
			.text_6 {
				margin-left: 6rpx;
			}
	
			.group_3 {
				line-height: 25rpx;
	
				.font_9 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 19rpx;
					color: #ff3333;
				}
	
				.font_7 {
					font-size: 32rpx;
					font-family: PingFangSC;
					line-height: 25rpx;
					color: #ff3333;
				}
			}
		}
	}
	
	.font_8 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		color: #999999;
	}
	
	.text_7 {
		margin-top: 117rpx;
	}
	.title {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 19rpx;
	}
	.popupInput{
		width: 100%;
		background: #F6F8FA;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		margin-bottom: 45rpx;
		>input{
			width: 100%;
			color: #333;
		}
	}
	.btnLeft{
		width: 240rpx;
		height: 88rpx;
		border: 2px solid #BDBDBD;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 20rpx;
	}
	.btnBg{
		background: #54BC6E;
		border: 2px solid #54BC6E;
		color: #FFFFFF;
		margin-right: 0rpx;
	}
</style>